<template>
	<view class="center-content u-skeleton" :style="{height:$windowHeight()+100+'rpx'}">
		<text class="t1">最新动态</text>

		<u-icon v-if="!data.reloadCard" @click="reloadCardFun" name="reload" size="60" class="reload" color="#686868">
		</u-icon>
		<u-loading v-if="data.reloadCard" class="reload" size="60" color="#686868"></u-loading>

		<scroll-view :scroll-y="true" class="box" :style="{height:$windowHeight()+20+'rpx'}">
			<u-grid col="3" :border="false">
				<!-- 骨架组件 -->
				<u-grid-item v-if="data.loading" v-for="item in 12">
					<u-card class="card u-skeleton-rect"></u-card>
				</u-grid-item>

				<!-- 真正的卡片组件 -->
				<u-grid-item v-if="!data.reloadCard" v-for="(item,index) in data.cards">
					<my-card class="my-card" @check="openCard(index)" :card="item" :headSrc="data.headSrc"></my-card>
				</u-grid-item>
			</u-grid>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			data:{
				type:Object
			}
		},
		name: "center-content",
		data() {
			return {

			};
		},
		methods:{
			openCard(index){
				this.$emit("openCard",index)
			},
			reloadCardFun(){
				this.$emit("reloadCardFun")
			}
		}
	}
</script>

<style lang="scss">
	.center-content {
		background-color: #fff;
		margin-left: 20rpx;
		height: 100%;
		width: 50%;
		box-shadow: 0rpx 5rpx 20rpx $u-bg-color;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		position: relative;
		overflow: hidden;


		.box {
			margin-top: 50rpx;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 10rpx;

			//border: 2rpx red solid;
			.card {
				width: 98%;
			}

			.my-card {
				width: 100%;
			}
		}

		.reload {
			position: absolute;
			left: 220rpx;
			top: 40rpx;
		}

		.t1 {
			position: absolute;
			left: 40rpx;
			font-size: 40rpx;
			top: 40rpx;
			color: $my-text-color1;
			font-weight: bold;
		}

		.edit-box {
			margin-top: 60rpx;
			width: 100%;
			height: 400rpx;
			box-shadow: 10rpx 10rpx 10rpx $u-bg-color;
			padding: 20rpx;
		}

		.edit {}
	}
</style>
